<template>
	<div>
		<a-row>
			<a-col :span="20">
				<a-input v-model:value="searchValue" placeholder="请搜索数据" />
			</a-col>
			<a-col :span="4">
				<a-button @click="fetchTableList" type="primary">搜索</a-button>
			</a-col>
		</a-row>
		<a-table bordered :data-source="dataSource" :columns="columns">
			<template #operation="{ record }">
				<a-button type="primary">编辑</a-button>
				<a-button type="primary" danger @click="handleDelete(record)">删除</a-button>
			</template>
		</a-table>
	</div>
</template>


<script lang="ts">
import { defineComponent, ref } from 'vue'
import { message } from 'ant-design-vue';
import request from '@/utils/'
import { debounce } from 'lodash'

export interface TableItemType {
	key: string
	name: string
	address: string
	age: number
}

export default defineComponent({
	created() {
		this.fetchTableList()

		// this.handleSearch = debounce(this.fetchTableList, 400)
	},
	data() {
		return {
			searchValue: ref<string>(''),
			dataSource: ref<TableItemType[]>([]),
			columns: [
				{
					title: '姓名',
					dataIndex: 'name',
					key: 'name',
				},
				{
					title: '年龄',
					dataIndex: 'age',
					key: 'age',
				},
				{
					title: '住址',
					dataIndex: 'address',
					key: 'address',
				},
				{
					title: '操作',
					dataIndex: 'operation',
					key: 'operation',
					slots: { customRender: 'operation' },
				},
			]
		}
	},
	methods: {
		async fetchTableList () {
			const resp = await request({
				url: '/api/table',
				params: {
					searchValue: this.searchValue
				}
			})
			this.dataSource = resp.data.data
		},

		async handleDelete(record: TableItemType) {
			const resp = await request({
				url: '/api/table/delete',
				method: 'post',
				data: {
					key: record.key
				}
			})

			const { code, mess } = resp.data

			if (code === 200) {
				this.fetchTableList()
				message.success(mess)
			} else {
				message.error('删除失败！！！')
			}
		},
	}
})


</script>